import React, { useState,useEffect } from 'react';
import { Layout, Menu, Breadcrumb,Table,Form,Input,Checkbox,Button } from 'antd';
import "./ZiFeiGuaHao.css"
import { Link } from 'react-router-dom';
import axios from "axios";



const layout = {
    labelCol: {
    span: 8,
    },
    wrapperCol: {
    span: 10,
    },
};
const tailLayout = {
    wrapperCol: {
    offset: 8,
    span: 16,
    },
};
const ZiFeiGuaHao = () => {
    const [allData,setAllData] = useState([]) //所有数据
    const [guaHaoCount,setGuaHaoCount] = useState(0)  //已挂号人数
    const [zongGuaHaoFei,setZongGuaHaoFei] = useState(0) // 总挂号费
    const [yiJiJiaRenCi,setYiJiJiaRenCi] = useState(0) //已计价人次
    const [meiJiJiaRenCi,setMeiJiJiaRenCi] = useState(0) //没计价人次
    const [nameInput,setNameInput] = useState("") //输入框姓名
    useEffect(()=>{ //请求全部数据
        axios("/renYuanJiBenZiLiao/xiaoWaiChaXunFenYe",{
            method:'get',
            /* headers:{"Content-Type":"application/json;charset=UTF-8"}, */
            params:{
                page:1
            }
        })
        .then(res=>{
            console.log(res);
            setAllData(res.data.list)
            setGuaHaoCount(res.data.list.length)
        })
        .catch(err=>{
            console.log(err);
        })
    },[])
    const submitGuaHao = () =>{
        axios("")
    }
    const onFinish = (values) => {
        console.log('Success:', values);
        console.log(values);
    };
    
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const columns = [
        { title: '姓名', dataIndex: 'xingMing', key: 'xingMing',align:'center' },
        { title: '性别', dataIndex: 'xingBie', key: 'xingBie',align:'center' },
        { title: '电话', dataIndex: 'dianHuaHaoMa', key: 'dianHuaHaoMa',align:'center' },
        { title: '住址', dataIndex: 'diZhi', key: 'diZhi',align:'center' },
        { title: '门诊号', dataIndex: 'yiLiaoKaHao', key: 'yiLiaoKaHao',align:'center' },
        {
        title: '操作',
        dataIndex: '',
        key: 'x',
        align:'center',
        render: () => (
            <>
                <Link to="/mz/zfghck"><button className="chaKanBtn">查看</button></Link>
                <button className="deleteBtn">删除</button>
                <Link to="/mz/zfghbj"><button className="bianJiBtn">编辑</button></Link>
            </>
        ),
        },
    ];
    return (
        <div>
            <Breadcrumb style={{marginBottom: 24}}>
                <Breadcrumb.Item>挂号</Breadcrumb.Item>
                <Breadcrumb.Item>自费挂号</Breadcrumb.Item>
            </Breadcrumb>
    <div className="dengJiBox">
        <h1>校外人员挂号信息登记</h1>
        <Form
                {...layout}
                name="basic"
                initialValues={{
                remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
            <Form.Item
                label="姓名"
                name="username"
                rules={[
                {
                required: true,
                message: '请输入姓名',
                },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="性别"
                name="password"
                rules={[
                {
                required: true,
                message: '请输入性别',
                },
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                label="电话"
                name="phoneNum"
                rules={[
                {
                required: true,
                message: '请输入电话号码',
                },
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                label="住址"
                name="address"
                rules={[
                {
                required: true,
                message: '请输入住址',
                },
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                label="身份证号"
                name="idNmu"
                rules={[
                {
                required: true,
                message: '请输入身份证号',
                },
                ]}
            >
                <Input/>
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    确认挂号
                </Button>
            </Form.Item>
        </Form>
    </div>
            <div className="binRenXinXiBox">
                <h1>校外病人信息表</h1>
                <div className="searchBox">
                    <span className="searchSpan">姓名</span>
                    <input className="searchInput"></input>
                    <button className="searchBtn">查询</button>
                </div>
                <div className="biaoBox">
                    <Table
                    columns={columns}
                    dataSource={allData}
                    />
                </div>
                <div className="zongLanBox">
                    <span className="zongLanBoxSpan1">已挂号人数</span>
                    <span className="zongLanBoxSpan2">{guaHaoCount}</span>
                    <span className="zongLanBoxSpan3">人</span>
                    <span className="zongLanBoxSpan4">总挂号费</span>
                    <span className="zongLanBoxSpan5">{zongGuaHaoFei}</span>
                    <span className="zongLanBoxSpan6">元</span>
                    <span className="zongLanBoxSpan7">已计价人次</span>
                    <span className="zongLanBoxSpan8">{yiJiJiaRenCi}</span>
                    <span className="zongLanBoxSpan9">人</span>
                    <span className="zongLanBoxSpan10">没计价人次</span>
                    <span className="zongLanBoxSpan11">{meiJiJiaRenCi}</span>
                    <span className="zongLanBoxSpan12">人</span>
                </div>
            </div>
        </div>
    );
}

export default ZiFeiGuaHao;
